window.addEventListener('load', function () {
    var bd_h1 = document.querySelector('.bd_h1');
    var goal = document.querySelector('.goal');
    var btn = document.querySelector('#jia');
    var ul1 = document.querySelector('#ul1');
    var ul2 = document.querySelector('#ul2');
    var p1 = document.querySelector('#p1');
    var p2 = document.querySelector('#p2');

    // 封装一个计数函数
    var jishu = function () {
        var li = ul1.childElementCount - 1;
        var lilili = ul2.childElementCount - 1;
        var bd_h3 = document.querySelector('.bd_h3');
        bd_h3.innerHTML = '共有' + (li + lilili) + '个任务,其中' + lilili + '个任务已完成';
    };
    // 封装一个换图片函数
    var huantu = function () {
        if ((ul1.childElementCount - 1) != 0) {
            p1.style.display = 'none';
            ul1.classList.remove('daiban');

        }
        else {
            ul1.classList.add('daiban');
            p1.style.display = 'block';
        }
        if ((ul2.childElementCount - 1) != 0) {
            ul2.classList.remove('yiban');
            p2.style.display = 'none';
        }
        else {
            ul2.classList.add('yiban');
            p2.style.display = 'block';
        }

    }
    // 封装删除函数
    var shan1 = function () {
        var as1 = ul1.querySelectorAll('a');

        for (var i = 0; i < as1.length; i++) {

            as1[i].onclick = function () {
                if (confirm('您确定要删除吗？')) {
                    ul1.removeChild(this.parentNode);
                    jishu();
                    huantu();
                } else {
                    return false;
                }


            }
        }
    }
    var shan2 = function () {
        var as2 = ul2.querySelectorAll('a');
        for (var i = 0; i < as2.length; i++) {
            as2[i].onclick = function () {
                if (confirm(('您确定要删除吗？'))) {
                    ul2.removeChild(this.parentNode);
                    jishu();
                    huantu();
                } else {
                    return false;
                }
            }
        }
    }
    //获取焦点样式改变
    goal.onfocus = function () {
        this.style.color = '#333';
        bd_h1.style.backgroundColor = 'white';
        bd_h1.style.boxShadow = 'none';

    }
    //失去焦点样式回复
    goal.onblur = function () {
        this.style.color = 'rgba(128, 128, 128, 0.527)';
        bd_h1.style.color = '#fefefe98';
        bd_h1.style.boxShadow = '13px 15px 16px #99999957 inset';
    }
    // 点击加号如果文本不为空添加到待办里
    btn.addEventListener('mouseover', function () {
        btn.classList.add('current');
    })
    btn.addEventListener('mouseout', function () {
        btn.classList.remove('current');
    })
    btn.addEventListener('click', function () {
        if (goal.value == '') {
            alert('请不要捣蛋啊');
            return false;
        } else {


            // 点击加号添加li
            var li = document.createElement('li');
            li.innerHTML = "<input type='checkbox' id='radio'>" + goal.value + "<a href='javascript:;'>x</a>";
            ul1.appendChild(li);

            goal.value = '';

            jishu();
            huantu();

            // 点击叉号删除元素
            var as1 = ul1.querySelectorAll('a');

            shan1();

            // 点击左边到右边

            var input1 = ul1.querySelectorAll('input');
            for (var i = 0; i < input1.length; i++) {
                input1[i].onclick = function () {

                    var x = this.parentNode;
                    ul1.removeChild(x);
                    var lili = x.cloneNode(true);
                    ul2.appendChild(lili);
                    jishu();
                    huantu();
                    shan2()
                    // 点击右边到左边
                    var input2 = ul2.querySelectorAll('input');
                    for (var i = 0; i < input2.length; i++) {
                        input2[i].onclick = function () {
                            var x = this.parentNode;
                            ul2.removeChild(x);
                            var lili = x.cloneNode(true);
                            ul1.appendChild(lili);
                            jishu();
                            huantu();
                            //再次点击左边到右边
                            var input1 = ul1.querySelectorAll('input');
                            for (var i = 0; i < input1.length; i++) {
                                input1[i].onclick = function () {

                                    var x = this.parentNode;
                                    ul1.removeChild(x);
                                    var lili = x.cloneNode(true);
                                    ul2.appendChild(lili);
                                    jishu();
                                    huantu();

                                    shan2()
                                }

                            }

                            shan1();
                        }

                    };
                };
            }
        }
    });
});